﻿<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../Styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/documentation.js"></script>
    <meta name="keywords" content="jQuery, Draw, Ad hoc drawing, SVG drawing, HTML5 drawing, VML drawing" />
    <meta name="description" content="This page represents the help documentation of the jqxDraw widget." />
    <title>jqxDraw API Reference</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
    <div id="Div1">
        <h2>Properties</h2>
        <table class="documentation-table" style="padding-bottom: 20px;">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Type
                </th>
                <th>
                    Default
                </th>
            </tr>

            <!-- renderEngine -->
            <tr>
                <td class="documentation-option-type-click">
                    <span>renderEngine</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    ''
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Determines the rendering engine used to display the chart. Possible values are 'SVG', 'VML' and 'HTML5'.
							When the property is not set jqxDraw will automatically select an optimal rendering engine depending on the browser capabilities.
                        </p>
						Example:
<pre><code>    
    $('#jqxDraw').jqxDraw({renderEngine: 'HTML5'});
    $('#jqxDraw').jqxDraw('refresh');
</code></pre>
                             <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/F74Sk/">renderEngine is set to 'HTML5'</a></div>  						
                    </div>
                </td>
            </tr>
            <!-- end of renderEngine -->
            
        </table>
        <br />
    </div>       
    <div id="events" style="display:none;">
    <h2>Events</h2>
        <table class="documentation-table">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Arguments
                </th>
                <th>
                </th>
            </tr>
            <!-- mouseover -->
            <!-- mouseout -->
            <!-- click -->
      </table>
    </div>        
   <div id="methods">
        <h2 class="documentation-top-header">
            Methods</h2>
        <table class="documentation-table">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Arguments
                </th>
                <th>
                    Return Value
                </th>
            </tr>
            
			<!-- clear -->
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>clear</span>
                </td>
                <td>
                    <span>None</span>
                </td>
                <td>
                    None
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Clears the content of the jqxDraw widget.<br/><br/>
                            Example:</p>
<pre>
<code>
    $('#container').jqxDraw('clear');
</code>
</pre>
                             <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/raMw9/">invoke the 'clear' method</a></div>  						
                    </div>                        
                </td>
            </tr>
            
			
        <!-- refresh -->
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>refresh</span>
                </td>
                <td>
                    <span>None</span>
                </td>
                <td>
                    None
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Refreshes / re-draws the content of the jqxDraw widget.<br/><br/>
                            Example:</p>
<pre>
<code>
    $('#container').jqxDraw('refresh');
</code>
</pre>
                             <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/XN8Xw/">invoke the 'refresh' method</a></div>  						
                    </div>                        
                </td>
            </tr>
            
        <!-- pieslice -->
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>pieslice</span>
                </td>
                <td>
                    <span>cx, cy, innerRadius, outerRadius, fromAngle, endAngle, centerOffset, {optional attributes}</span>
                </td>
                <td>
                    element object
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Creates a pie slice element<br/><br/>
                            Example:</p>
<pre>
<code>
    $('#container').jqxDraw();

    var renderer = $('#container').jqxDraw('getInstance');
    
    // create a pie slice
    // params: cx, cy, innerRadius, outerRadius, fromAngle, endAngle, centerOffset, {optional attributes}
    var piesliceElement = renderer.pieslice(250, 150, 50, 100, 15, 95, 0, {fill: 'yellow'});
</code>
</pre>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/N4fLM/">invoke the 'pieslice' method</a></div>  						
                    </div>                        
 
                </td>
            </tr>

        <!-- circle -->
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>circle</span>
                </td>
                <td>
                    <span>cx, cy, r, {optional attributes}</span>
                </td>
                <td>
                    element object
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Creates a circle element<br/><br/>
                            Example:</p>
<pre>
<code>
    $('#container').jqxDraw();

    var renderer = $('#container').jqxDraw('getInstance');
    
    // create a circle
    // params: cx, cy, radius, attributes
    var circleElement = renderer.circle(250, 150, 50, {});
</code>
</pre>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xv5u8/">invoke the 'circle' method</a></div>  						
                    </div>                                                
                </td>
            </tr>
            
        <!-- line -->
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>line</span>
                </td>
                <td>
                    <span>x1, y1, x2, y2, {optional attributes}</span>
                </td>
                <td>
                    element object
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Creates a line element<br/><br/>
                            Example:</p>
<pre>
<code>
    $('#container').jqxDraw();

    var renderer = $('#container').jqxDraw('getInstance');
    
    // params: x1, y1, x2, y2, attributes
    renderer.line(600, 100, 600, 200, { stroke: 'blue', 'stroke-width': 6 });
</code>
</pre>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/N2PHz/">invoke the 'line' method</a></div>  						
                    </div>                        
                </td>
            </tr>
            
        <!-- rect -->
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>rect</span>
                </td>
                <td>
                    <span>x, y, width, height, {optional attributes}</span>
                </td>
                <td>
                    element object
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Creates a rectangle element<br/><br/>
                            Example:</p>
<pre>
<code>
    $('#container').jqxDraw();

    var renderer = $('#container').jqxDraw('getInstance');
    
    // params: x, y, width, height, attributes
    var rectElement = renderer.rect(0, 0, 200, 100, { stroke: '#777777', fill: 'transparent' });
</code>
</pre>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tXQrf/">invoke the 'rect' method</a></div>  						
                    </div>                        
                </td>
            </tr>
            
        <!-- path -->
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>path</span>
                </td>
                <td>
                    <span>line command , {optional attributes}</span>
                </td>
                <td>
                    element object
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Creates a path element<br/><br/>
                            Example:</p>
<pre>
<code>
    $('#container').jqxDraw();

    var renderer = $('#container').jqxDraw('getInstance');
    
    // draw a path
    // params: line command ('d'), attributes
    var path = renderer.path("M 100,100 L 150,130 C 130,130 180,190 150,150", { stroke: '#777777', fill: 'red' });
    
    /* Supported line commands:
    MoveTo: M x,y
    LineTo: L x,y
    Cubic curve: C x1,y1,x2,y2,x,y
    Close path: Z
    */
</code>
</pre>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/j4d2Q/">invoke the 'path' method</a></div>  						
                    </div>                        

                </td>
            </tr>
            
        <!-- measureText -->
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>measureText</span>
                </td>
                <td>
                    <span>text, angle, {optional attributes}</span>
                </td>
                <td>
                    {width, height}
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Estimates the size of a text element<br/><br/>
                            Example:</p>
<pre>
<code>
    $('#container').jqxDraw();

    var renderer = $('#container').jqxDraw('getInstance');
    // params: text, angle, attributes
    var textSize = renderer.measureText('My text', 45,  { 'class': 'smallText' }); 
    </code>
</pre>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/7Vvj8/">invoke the 'measureText' method</a></div>  						
                    </div>   
                        
                </td>
            </tr>
            
        <!-- text -->
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>text</span>
                </td>
                <td>
                    <span>text, x, y, width, height, angle, attributes, clip, halign, valign, rotateAround</span>
                </td>
                <td>
                    element object
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Creates a text element<br/><br/>
                            Example:</p>
<pre>
<code>
    $('#container').jqxDraw();

    var renderer = $('#container').jqxDraw('getInstance');
    // params: text, x, y, width, height, angle, attributes, clip, horizontal alignment('center', 'left', 'right'), vertical alignment('middle', 'top', 'bottom'), rotate around point
    renderer.text(
        "Drawing shapes", // text
        50, // x
        20, // y 
        undefined, // width
        undefined, // height
        0, // angle
        { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, // attributes
        false, // clip
        'center', // horizontal alignment
        'center', // vertical alignment
        'centermiddle'); // rotate around point
    </code>
</pre>
                            <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/KGbwb/">invoke the 'text' method</a></div>  						
                    </div>   
                </td>
            </tr>
            

        <!-- attr -->
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>attr</span>
                </td>
                <td>
                    <span>element, attributes</span>
                </td>
                <td>
                    none
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets attributes of an element<br/><br/>
                            Example:</p>
<pre>
<code>
    $('#container').jqxDraw();

    var renderer = $('#container').jqxDraw('getInstance');
    
    // create a circle
    // params: cx, cy, radius, params
    var circleElement = renderer.circle(250, 150, 50, {});

    // set the fill color and border color of the circle
    // params: element, attributes
    renderer.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
</code>
</pre>
                                                    <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/m9mzY/">invoke the 'attr' method</a></div>  						
                    </div>   
                        
                </td>
            </tr>
            
        <!-- getAttr -->
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>getAttr</span>
                </td>
                <td>
                    <span>element, attribute name</span>
                </td>
                <td>
                    string
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets element's attribute<br/><br/>
                            Example:</p>
<pre>
<code>
    $('#container').jqxDraw();

    var renderer = $('#container').jqxDraw('getInstance');
    
    // create a circle
    // params: cx, cy, radius, params
    var circleElement = renderer.circle(250, 150, 50, {fill: 'lightblue'}});

    // get the fill color of the circle
    // params: element, attribute name
    var fillColor = renderer.getAttr(circleElement, 'fill');
</code>
</pre>
                                                    <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/bd64X/">invoke the 'getAttr' method</a></div>  						
                    </div>   
                </td>
            </tr>

        <!-- on -->
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>on</span>
                </td>
                <td>
                    <span>element, event, function</span>
                </td>
                <td>
                    none
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Adds an event handler to an element<br/><br/>
                            Example:</p>
<pre>
<code>
    $('#container').jqxDraw();

    var renderer = $('#container').jqxDraw('getInstance');
    
    // create a circle
    // params: cx, cy, radius, params
    var circleElement = renderer.circle(250, 150, 50, {fill: 'lightblue'});

    renderer.on(circleElement, 'click', function () 
        { 
            // get the Y coordinate of the circle's center
            var circleY = parseInt(renderer.getAttr(circleElement, 'cy'));
            
            // move the circle 10 pixels down
            renderer.attr(circleElement, { cy: circleY + 10; });
        });
</code>
</pre>
                                                    <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5yRPa/">invoke the 'on' method</a></div>  						
                    </div>  
                        
                </td>
            </tr>

        <!-- off -->
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>off</span>
                </td>
                <td>
                    <span>element, event, function</span>
                </td>
                <td>
                    none
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Removes an event handler from an element<br/><br/>
                            Example:</p>
<pre>
<code>
    $('#container').jqxDraw();

    var renderer = $('#container').jqxDraw('getInstance');
    
    // create a circle
    // params: cx, cy, radius, params
    var circleElement = renderer.circle(250, 150, 50, {fill: 'lightblue'});

    var moveCircle = function() {
        var circleY = parseInt(renderer.getAttr(circleElement, 'cy'));
        renderer.attr(circleElement, { cy: circleY + 10 });
    }

    // add event handler
    renderer.on(circleElement, 'click', moveCircle);

    // remove event handler
    renderer.off(circleElement, 'click', moveCircle);
 
    </code>
</pre>
                                                    <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3LXyU/">invoke the 'off' method</a></div>  						
                    </div>  
                </td>
            </tr>
            
            <!-- saveAsJPEG -->
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span30'>saveAsJPEG</span>
                </td>
                <td>
                    <span>fileName, exportServer</span>
                </td>
                <td>
                    boolean
                </td>
            </tr>
			
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Exports the content as JPEG image.<br/>
							The browser must support HTML5 Canvas and the device must be able to connect to the export server.
							If you don't setup your own export server the default server is jqwidgets.com.<br/><br/>
                            Example:</p>
<pre>
<code>    
    $('#jqxDraw').jqxDraw('saveAsJPEG', 'myImage.jpeg', 'http://&lt;my domain&gt;/export_server/server.php');
</code>
</pre>
                                                    <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/y4DzZ/">invoke the 'saveAsJPEG' method</a></div>  						
                    </div>                          
                </td>
            </tr>
			
            <!-- saveAsPNG -->
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span31'>saveAsPNG</span>
                </td>
                <td>
                    <span>fileName, exportServer</span>
                </td>
                <td>
                    boolean
                </td>
            </tr>
			
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Exports the chart's content as PNG image.<br/>
							The browser must support HTML5 Canvas and the device must be able to connect to the export server.
							If you don't setup your own export server the default server is jqwidgets.com.<br/><br/>
                        Example:</p>
<pre>
<code>
    $('#jqxDraw').jqxDraw('saveAsPNG', 'myImage.png', 'http://&lt;my domain&gt;/export_server/server.php');
</code>
</pre>
                                                    <div style="padding-bottom:5px;">
  <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Mx2s7/">invoke the 'saveAsPNG' method</a></div>  						
                    </div>                          

                </td>
            </tr>
			
        </table>
        <br />
    </div>                
</body>
</html>
